<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<meta name="baidu-site-verification" content="JdMif0g2tL" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>angular</title>
</head>
<body>
<style type="text/css" media="screen">
	*{margin: 0;padding: 0;}
	li{list-style: none;width: 25%;float: left;text-align: center;font-size: 18px;}
	
</style>  
<div ng-app="myApp">
	<div ng-controller="myCtrl">
		<input type="text" ng-model="search">
		<table width="100%" border="1" style="font-size: 0.5rem;text-align: center;">
			<thead>
				<tr>
					<th>编号</th>
					<th>点击数</th>
					<th>标题</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="(key, value) in lists">
					<td>{{value.id}}</td>
					<td>{{value.click}}</td>
					<td>{{value.title}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<script type="text/javascript">
	document.getElementsByTagName('html')[0].style.fontSize=window.screen.width/10+'px';
</script>
<script src="../js/angular.min.js" charset="utf-8"></script>
<script type="text/javascript">
	var app =angular.module('myApp', []);
	app.controller('myCtrl',['$scope','$filter',function($scope,$filter){
		$scope.data=[
			{id:1,click:200,title:"g小兵"},
			{id:5,click:100,title:"f小兵"},
			{id:3,click:500,title:"w小兵"},
			{id:8,click:900,title:"a小兵"},
			{id:2,click:300,title:"hn小兵"}
		];
		//临时数据用于显示,上面循环列表也是用临时数据
		$scope.lists=$scope.data;
		$scope.$watch('search', function(newValue, oldValue) {
			console.log(newValue);
			$scope.lists=$filter('filter')($scope.data,newValue);
		});
		
	}])
</script>
</body>
</html>
<!--应该是14.11，时间-2017-05-08->